<template>
  <div id="fiveChart"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import mapApi from "../map";
import ChinaData from "../map/china.json"; // 中国地图数据
import mapData from "../map/500000.json"; // 重庆地图数据
import allBorderData from "../border/border.json"; // 重庆地图边界数据
import mainCityBorderData from "../border/cq-main-border.json"; // 重庆主城边界数据
import * as echarts from "echarts";
import "echarts-gl";
import { ref } from "vue";

const setColor = (num) => {
  if (num >= 0 && num <= 30) return "#3d8e63";
  if (num >= 31 && num <= 60) return "#3e81bd";
  if (num >= 61 && num <= 90) return "#e1d34e";
  if (num >= 91 && num <= 120) return "#ae8655";
  if (num > 120) return "#bd5255";
};
let resultData = ref([]);

let myMapData = ref([
  {
    区县: "江津区",
    数量: "155",
    排名: 1,
  },
  {
    区县: "渝北区",
    数量: "130",
    排名: 2,
  },
  {
    区县: "重庆市",
    数量: "123",
    排名: 3,
  },
  {
    区县: "江北区",
    数量: "97",
    排名: 4,
  },
  {
    区县: "万州区",
    数量: "91",
    排名: 5,
  },
  {
    区县: "沙坪坝区",
    数量: "83",
    排名: 6,
  },
  {
    区县: "合川区",
    数量: "79",
    排名: 7,
  },
  {
    区县: "九龙坡区",
    数量: "76",
    排名: 8,
  },
  {
    区县: "长寿区",
    数量: "75",
    排名: 9,
  },
  {
    区县: "秀山县",
    数量: "73",
    排名: 10,
  },
  {
    区县: "巴南区",
    数量: "63",
    排名: 11,
  },
  {
    区县: "涪陵区",
    数量: "63",
    排名: 11,
  },
  {
    区县: "大渡口区",
    数量: "59",
    排名: 13,
  },
  {
    区县: "南岸区",
    数量: "54",
    排名: 14,
  },
  {
    区县: "渝中区",
    数量: "53",
    排名: 15,
  },
  {
    区县: "北碚区",
    数量: "51",
    排名: 16,
  },
  {
    区县: "大足区",
    数量: "48",
    排名: 17,
  },
  {
    区县: "南川区",
    数量: "48",
    排名: 17,
  },
  {
    区县: "云阳县",
    数量: "47",
    排名: 19,
  },
  {
    区县: "永川区",
    数量: "45",
    排名: 20,
  },
  {
    区县: "奉节县",
    数量: "40",
    排名: 21,
  },
  {
    区县: "酉阳县",
    数量: "39",
    排名: 22,
  },
  {
    区县: "黔江区",
    数量: "36",
    排名: 23,
  },
  {
    区县: "垫江县",
    数量: "35",
    排名: 24,
  },
  {
    区县: "彭水县",
    数量: "34",
    排名: 25,
  },
  {
    区县: "丰都县",
    数量: "30",
    排名: 26,
  },
  {
    区县: "綦江区",
    数量: "28",
    排名: 27,
  },
  {
    区县: "巫溪县",
    数量: "27",
    排名: 28,
  },
  {
    区县: "巫山县",
    数量: "26",
    排名: 29,
  },
  {
    区县: "璧山区",
    数量: "25",
    排名: 30,
  },
  {
    区县: "石柱县",
    数量: "20",
    排名: 31,
  },
  {
    区县: "忠县",
    数量: "19",
    排名: 32,
  },
  {
    区县: "城口县",
    数量: "10",
    排名: 33,
  },
]);
async function initMap() {
  const myChart = echarts.init(document.getElementById("fiveChart"));

  // 注册地图名字(china)和数据(geoJson)
  echarts.registerMap("china", ChinaData);
  echarts.registerMap("mapData", mapData);
  echarts.registerMap("allBorderData", allBorderData);
  echarts.registerMap("mainCityBorderData", mainCityBorderData);

  myChart.showLoading();

  // 图表配置项
  let option = {

    series: [
      // {
      //   type: "map3D",
      //   map: "china",
      //   data: geoData,
      //   label: {
      //     show: true, // 显示标签
      //     color: "#ffffff", // 标签颜色
      //     fontSize: 12, // 标签字体大小
      //     fontWeight: "normal", // 标签字体粗细
      //   },
      //   itemStyle: {
      //     borderWidth: 0.3, // 边框宽度
      //     borderColor: "#ffffff", // 边框颜色
      //   },
      //   shading: "realistic", // 三维图形的着色效果
      // },
      // {
      //   type: "map",
      //   map: "mapData",
      //   roam: true,
      // },
      {
        type: "map3D",
        map: "mapData",
        roam: true,

        // center: [1, 1],
        // zoom: 10, // 初始化展示多大

        /* 用户最多/少 能放大到多少 */
        scaleLimit: {
          min: 1,
          max: 30,
        },
        selectedMode: "single", //  单选或者多选 multiple
        label: {
          show: true,
          // position: [10, 10],
          // positoin: "left",
          distance: 50,
          fontSize: 12, // 标签文字大小
          offset: [0, 0],
          minMargin: 1,
          color: "white",
          formatter: (data) => {
            console.log("data", data);
          },
          fontStyle: "normal", // normal-正常 'italic'-斜体

          // fontWeight: 500,
          align: "right",
          // color: "#ffffff",
          // backgroundColor: "red", // label的背景颜色
          // borderWidth: 1,
          // borderColor: "#333",
          // borderRadius: 5,
          // padding: 10,
          shadowColor: "#008c8c",
          shadowOffsetX: 2,
          shadowOffsetY: 2,

          textBorderWidth: 1,
          // textBorderColor: "blue",

          textShadowColor: "#ff6700",
          textShadowOffsetX: 5,
          textShadowOffsetY: 5,

          // height: 20,
          // width: 50,
        },
        // 地图区域的多边形 图形样式。
        itemStyle: {
          areaColor: "#115698",
          color: "#115597",
          borderColor: "rgba(179, 206, 255, 0.8)",
          borderWidth: 1,
          borderType: "solid",
          borderDashOffset: 1,
          // borderCap: "round",
          //地图shadow
          shadowColor: "red",
          shadowBlur: 30,
          shadowOffsetX: 1,
          shadowOffsetY: 1,
          opacity: 1, // 地图的透明度
        },
        // 高亮状态上多边形和标签样式。
        emphasis: {
          // 是否开启鼠标移上去后高亮
          // disabled: true,
        },
        // 地图距离容器的位置
        // left: "50",

        // layoutCenter: ["50%", "50%"],
        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
        // layoutSize: 100,
        data: resultData.value,
        markPoint: {},
      },
    ],
  };

  // 设置图表实例的配置项以及数据
  myChart.setOption(option);
  myChart.hideLoading();
  myChart.on("click", function (params) {
    console.log("params");
  });

  myChart.on("georoam", function (params) {
    const options = myChart.getOption();

    console.log("options", options);

    console.log("params", params);
  });
}

onMounted(() => {
  resultData.value = myMapData.value.map((item) => {
    const color = setColor(item.数量);
    return {
      ...item,
      name: item.区县,
      value: item.数量,
      itemStyle: {
        color: color ? color : "red",
        borderColor: "white",
        borderWidth: 0.5,
      },
    };
  });

  // 过滤数据
  initMap();
});
</script>

<style class="fiveChart">
#fiveChart {
  width: 100%;
  height: 100%;
  background: #032459;

}
</style>
